<template>
     <!-- 素材库 -->
     <material-dialog 
        v-model="visible"
        @on-preview="onPreview"
        @on-error="materialError"
        @on-ok="fileInsert"
        :category="props.category"
        :mode="props.mode"
        :limit="props.limit"
        :selectedMaterials="props.selectedMaterials"
        :isForciblySelect="props.isForciblySelect"
        :previewEnable="props.previewEnable"
        :limitType="props.limitType"
        :limitSize="props.limitSize"
        :disabledDeselect="disabledDeselect"
        :usableMode="props.usableMode"
    >
        <template #fileName="{filename}">
            <ellipsis
                placement="bottom"
                :content="filename"
                :lineHeight="21"
            ></ellipsis>
        </template>
        <template #tabBarExtraContent v-if="showMyMaterial">
            <el-button class="srt-el-button srt-el-button-h32 mr12 w72" @click="goMaterialCentre">管理素材</el-button>
        </template>
    </material-dialog>
    
</template>


<script setup>
import {preview} from '@yanxiu/player';
import ellipsis from '@/components/ellipsis.vue';
import { pageJump } from '@/global/location-transfer.js';
import { jumpHref } from '@/router/jumpHref.js';
import { computed } from 'vue';

const emit = defineEmits(['on-ok', 'update:modelValue']);

const props = defineProps({
    modelValue: {
       type: Boolean,
       default: false,
    },
    showMyMaterial: { // 是否显示管理我的素材
        type: Boolean,
        default: false
    },
    previewEnable: { // 是否显示预览
        type: Boolean,
        default: false
    },
     /* 要展示的素材库类型 */
    category: {
      type: Array,
      default: () => ["all", "document", "audio", "video", "img", "other"],
    },
    /* 多选 0 or 单选 1 */
    mode: {
      type: Number,
      default: 1,
    },
    /* 限制可选择的素材数量 */
    limit: {
      type: Number,
      default: 20
    },

    /* 回显勾选 */
    selectedMaterials: {
      type: Array,
      default: () => []
    },
    /* 是否允许选择转码中的素材，默认开启 */
    isForciblySelect: {
      type: Boolean,
      default: false
    },

    /* 限制上传的文件类型， */
    limitType: {
      type: [Object, Array],
      default: undefined
    },
    /* 限制上传的文件大小，单位 byte */
    limitSize: {
       type: [Object, Number],
       default: undefined
    },
    disabledDeselect: { // 是否禁用移除已插入的素材，默认不禁用
        type: Boolean,
        default: false
    },
    /* 判定素材可用的模式，【strict.严格（默认） lax.宽松 none.不受限】 */
    usableMode: {
      type: String,
      default: 'strict'
    },
    downloadable: { // 可选，是否支持转码失败时，提供下载源文件（v0.1.14新增）。默认允许
        type: Boolean,
        default: true
    }
})

const visible = computed({
    get: () => {
        return props.modelValue;
    },
    set: (val) => {
        emit("update:modelValue", false)
    }
})


// 预览素材库
function onPreview(item) {
   preview(item, {downloadable: true});
}

// 去个人素材库
function goMaterialCentre(){
    pageJump(jumpHref.home.myMaterial(), true)
}

// 素材库错误提示
function materialError(msg) {
    let msgMap = {1001: '文件类型不符合要求', 1002: '文件大小不符合要求'};
    G_dispatchEvent('toast', { message: msgMap[msg.code] || msg.desc, type: 'error'});
}

function fileInsert(data) {
    emit('on-ok', data)
}


</script>
<style lang="scss" scoped>
    .mr12 {
        margin-right: 12px;
    }
    .w72 {
        width: 76px;
    }
</style>